<template>
  <el-scrollbar class="scrollbar-handle">
    <el-form status-icon label-width="100px" :model="formEntity">
      <el-divider>
        <el-tag type="success">基本信息</el-tag>
      </el-divider>
      <el-row>
        <el-form-item label="账号">
          <el-input v-model="formEntity.account" readonly></el-input>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="工号">
          <el-input v-model="formEntity.enCode" readonly></el-input>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="姓名">
          <el-input v-model="formEntity.realName"></el-input>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="用户性别">
          <rayd-select options="Gender" v-model="formEntity.gender"></rayd-select>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="生日">
          <rayd-date-picker v-model="formEntity.birthday" type="date" ></rayd-date-picker>
        </el-form-item>
      </el-row>

      <el-divider>
        <el-tag type="warning">组织架构信息</el-tag>
      </el-divider>
      <el-row>
        <el-form-item label="组织">
          <el-cascader
            clearable
            filterable
            :props="$ELEMENT.cascaderProps"
            :show-all-levels="false"
            :options="manaTreeList"
            v-model="formEntity.manaframeId"
            placeholder="无对应组织"
            :disabled="true"
          ></el-cascader>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="部门">
          <el-cascader
            clearable
            filterable
            :props="$ELEMENT.cascaderProps"
            :show-all-levels="false"
            :options="depTreeList"
            v-model="formEntity.departmentId"
            placeholder="无对应部门"
            :disabled="true"
          ></el-cascader>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="岗位">
          <el-cascader
            :props="{ multiple: true, ...$ELEMENT.cascaderProps }"
            :show-all-levels="false"
            :options="postTreeList"
            v-model="formEntity.postIds"
            placeholder="无对应岗位"
            :disabled="true"
          ></el-cascader>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="角色">
          <rayd-select 
            multiple
            placeholder="无对应角色"  
            :options="roleList" 
            v-model="formEntity.roleIds"
            :optionProps="{value:'B_RoleId',label:'B_FullName'}"
            :disabled="true"
          >
          </rayd-select>
        </el-form-item>
      </el-row>

      <el-divider>
        <el-tag type="danger">联系方式</el-tag>
      </el-divider>
      <el-row>
        <el-form-item label="电话">
          <el-input
            v-model="formEntity.telephone"
            placeholder="请输入"
            clearable
          ></el-input>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="手机">
          <el-input
            v-model="formEntity.mobile"
            placeholder="请输入"
            clearable
          ></el-input>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="邮箱">
          <el-input
            v-model="formEntity.email"
            placeholder="请输入"
            clearable
          ></el-input>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="QQ">
          <el-input
            v-model="formEntity.oICQ"
            placeholder="请输入"
            clearable
          ></el-input>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="微信">
          <el-input
            v-model="formEntity.weChat"
            placeholder="请输入"
            clearable
          ></el-input>
        </el-form-item>
      </el-row>
    </el-form>
    <el-button
      style="position: fixed; right: 20px; bottom: 20px"
      type="primary"
      @click="formSubmit"
      :loading="loading"
      >保 存</el-button
    >
  </el-scrollbar>
</template>

<script>
import { mapGetters } from "vuex";
import { UserCenter, Manaframe, Department, Post, Role } from "@/api";

export default {
  name: "BaseInfo",
  computed: {
    ...mapGetters(["userinfo"]),
  },
  data() {
    return {
      /* 实体数据 */
      genderList: this.util.getDataItemList("Gender"), //性别数据（数据字典）
      manaTreeList: [], //架构树型数据
      depTreeList: [], //部门树型数据
      postTreeList: [], //岗位树型数据
      roleList: [], //角色列表数据

      //表单实体
      formEntity: {},
      //加载中
      loading: false,
    };
  },
  created() {
    //设置用户信息
    this.formEntity = JSON.parse(JSON.stringify(this.userinfo));
    //岗位Id从字符串转数组
    if (!this.util.validateNull(this.formEntity.postIds)) {
      this.formEntity.postIds = this.formEntity.postIds.split(",");
    }
    //角色Id从字符串转数组
    if (!this.util.validateNull(this.formEntity.roleIds)) {
      this.formEntity.roleIds = this.formEntity.roleIds.split(",");
    }
    //初始化
    this.init();
  },
  methods: {
    //初始化
    init() {
      this.loading = true;
      /* 初始化数据源 */
      Promise.all([
        //获取组织树形数据
        Manaframe.GetTreeList().then((res) => {
          this.manaTreeList = res;
        }),
        //获取部门树形数据
        Department.GetTreeList({
          B_ManaframeId: this.formEntity.manaframeId,
          isDeep: false,
        }).then((res) => {
          this.depTreeList = res;
        }),
        //获取岗位树形数据
        Post.GetTreeList({
          B_ManaframeId: this.formEntity.manaframeId,
          B_DepartmentId: "",
          isDeep: true,
        }).then((res) => {
          this.postTreeList = res;
        }),
        //获取角色列表数据
        Role.GetListByManaId({ B_ManaframeId: "", isDeep: true }).then(
          (res) => {
            this.roleList = res;
          }
        ),
      ]).then(() => {
        this.loading = false;
      });
    },
    //表单提交
    formSubmit() {
      //删除影响
      delete this.formEntity.roleIds;
      delete this.formEntity.postIds;
      UserCenter.Save(this.formEntity).then((res) => {
        this.loading = true;
        //更新store
        let u = this.userinfo;
        u.realName = this.formEntity.realName;
        u.gender = this.formEntity.gender;
        u.birthday = this.formEntity.birthday;
        u.telephone = this.formEntity.telephone;
        u.mobile = this.formEntity.mobile;
        u.email = this.formEntity.email;
        u.oICQ = this.formEntity.oICQ;
        u.weChat = this.formEntity.weChat;
        this.$store.commit('SET_USERINFO', u);// 保存用户信息

        this.$store.dispatch("RefeshToken");// 刷新Token（用户信息）
      });
    },
  },
};
</script>